<template>
  <div class="favoriteDetail" v-if="userinfo && nsCollect">
    <header>
      <div class="back">
        <van-icon name="arrow-left" size="22" color="black" @click="back" />
      </div>
      <div></div>
    </header>
    <div class="likeheader"></div>
    <div class="top">
      <div class="title">{{ nsCollect.title }}</div>
      <div class="sub">{{ nsCollect.list.length }}部作品</div>
      <div class="author">
        <div class="avatar">
          <van-image
            width="26px"
            height="26px"
            lazy-load
            :src="userinfo.avatar"
            round
          />
        </div>
        <div class="username">{{ userinfo.username }}</div>
      </div>
    </div>
    <div class="index">
      <div class="favoriteDetails" v-if="nsCollect.list.length > 0">
        <FavoriteDetailItem
          v-for="(item, index) in nsCollect.list"
          :key="index"
          :middleCard="item"
          @doMore="doMore(index)"
        />
      </div>
      <div class="none" v-else>还没有收藏的作品</div>
    </div>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
    />
    <van-action-sheet
      v-if="nsCollects"
      v-model="show1"
      :title="isAdding ? '新建收藏夹' : '选择收藏夹'"
      class="sheet"
      :closeable="false"
      :cancel-text="isAdding ? '' : '确认'"
      @cancel="onCancel"
      @close="isAdding = false"
      @open="openSheet"
    >
      <div v-if="!isAdding" class="add" @click.stop="addCollect">
        +&nbsp;新建
      </div>
      <div v-else class="addOk" @click.stop="addCollectOk">完成</div>
      <div class="close" @click.stop="show1 = false">
        <van-icon name="cross" size="22" color="#000" />
      </div>
      <van-checkbox-group v-model="result">
        <van-cell-group v-if="!isAdding">
          <van-cell
            v-for="(collect, index) in nsCollects"
            clickable
            :key="index"
            :title="collect.title"
            @click.stop="toggle(index)"
          >
            <template #right-icon>
              <van-checkbox :name="index" ref="checkboxes" />
            </template>
          </van-cell>
        </van-cell-group>
        <van-cell-group v-else>
          <van-cell>
            <input
              class="input"
              type="text"
              placeholder="请输入收藏夹的名称，最多20字"
              v-model="addCollectName"
            />
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </van-action-sheet>
  </div>
</template>

<script>
import FavoriteDetailItem from "@/components/FavoriteDetailItem.vue";

export default {
  name: "FavoriteDetail",
  components: {
    FavoriteDetailItem,
  },
  data() {
    return {
      userinfo: null,
      nsCollect: null,
      nsCollects: null,
      show: false,
      actions: [{ name: "编辑" }],
      show1: false,
      result: [],
      isAdding: false,
      addCollectName: "",
      i: -1,
    };
  },
  created() {
    if (this.$route.query.userid == 13525021) {
      this.userinfo = JSON.parse(localStorage.getItem("nsMine"));
      this.nsCollects = JSON.parse(localStorage.getItem("nsCollects"));
      this.nsCollect = this.nsCollects[this.$route.query.i];
    }
  },
  methods: {
    back() {
      window.history.go(-1);
    },
    doMore(i) {
      // console.log(i);
      this.i = i;
      this.show = true;
    },
    onSelect(item) {
      if (item.name == "编辑") {
        // console.log("编辑");
        this.show1 = true;
      }
    },
    openSheet() {
      let collectArr = this.nsCollects.map((o) => {
        return (
          o.list
            .map((i) => i.id == this.nsCollect.list[this.i].id)
            .indexOf(true) != -1
        );
      });
      // console.log(collectArr);
      for (let i in collectArr) {
        if (collectArr[i]) {
          this.result.push(Number(i));
        }
      }
    },
    addCollectOk() {
      if (this.addCollectName && this.addCollectName != "默认收藏夹") {
        this.nsCollects = [
          ...this.nsCollects,
          { title: this.addCollectName, list: [] },
        ];
        localStorage.setItem("nsCollects", JSON.stringify(this.nsCollects));
        this.isAdding = false;
        this.addCollectName = "";
        this.$toast("创建成功");
      } else {
        this.$toast("请输入收藏夹名称");
      }
    },
    addCollect() {
      this.isAdding = true;
    },
    onCancel() {
      let canDo = false;
      let collectArr = this.nsCollects.map((o) => {
        return (
          o.list
            .map((i) => i.id == this.nsCollect.list[this.i].id)
            .indexOf(true) != -1
        );
      });
      // console.log(collectArr);
      for (let i of this.result) {
        collectArr[i] = !collectArr[i];
      }
      // console.log(collectArr);
      for (let i in collectArr) {
        if (collectArr[i]) {
          canDo = true;
        }
      }
      // console.log(canDo);
      if (canDo) {
        let currentId = this.nsCollect.list[this.i].id;
        let changeArr = Array(this.nsCollects.length).fill(false);
        for (let i of this.result) {
          changeArr[i] = true;
        }
        // console.log(changeArr);
        for (let i in changeArr) {
          // console.log(collectArr[i]);
          if (changeArr[i]) {
            // continue;
            if (
              this.nsCollects[i].list
                .map((o) => o.id == currentId)
                .indexOf(true) == -1
            ) {
              this.nsCollects[i].list.unshift(currentId);
            }
          } else {
            if (
              this.nsCollects[i].list
                .map((o) => o.id == currentId)
                .indexOf(true) != -1
            ) {
              this.nsCollects[i].list = this.nsCollects[i].list.filter((o) => {
                return o.id != currentId;
              });
            }
          }
        }
        // console.log(this.nsCollects);
        localStorage.setItem("nsCollects", JSON.stringify(this.nsCollects));
        if (changeArr.indexOf(true) != -1) {
          this.isCollect = true;
        } else {
          this.isCollect = false;
        }
        this.$toast("操作成功");
      }
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
  },
};
</script>

<style lang="scss" scoped>
.favoriteDetail {
  // padding: 0 15px;
  // padding-top: 50px;
  background-color: #f2f2f2;
  min-height: 100vh;

  header {
    background-color: white;
    // border-bottom: 1px solid #f2f2f2;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    > div {
      width: 33%;
    }

    .back {
      i {
        margin-left: 15px;
      }
    }
  }

  .likeheader {
    height: 50px;
  }

  .top {
    // margin-top: 15px;
    // margin-bottom: 20px;
    padding: 15px;
    background-color: white;

    .title {
      font-weight: bold;
      font-size: 20px;
      margin-bottom: 5px;
    }

    .sub {
      font-size: 14px;
      color: #999;
      margin-bottom: 20px;
    }

    .author {
      display: flex;
      align-items: center;

      .avatar {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 1px solid #f2f2f2;
        margin-right: 5px;

        :deep(.van-image) {
          display: block !important;
        }
      }

      .username {
        font-size: 14px;
      }
    }
  }

  .index {
    padding: 10px 7.5px 0;
    // background-color: #f2f2f2;

    .favoriteDetails {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      // min-height: 481px;
    }

    .none {
      width: 100%;
      font-size: 18px;
      color: #999;
      text-align: center;
      line-height: 481px;
    }
  }

  .sheet {
    .add {
      position: absolute;
      left: 10px;
      top: 8px;
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      border: 1px solid #f2f2f2;
      padding: 0 10px;
    }

    .addOk {
      position: absolute;
      left: 10px;
      top: 8px;
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      border: 1px solid #f2f2f2;
      padding: 0 10px;
    }

    .input {
      background: none;
      outline: none;
      // border: 1px solid #ccc;
      border: none;
      padding: 0;
      font-size: 14px;
      color: #999;
      width: 215px;
      flex-shrink: 0;
      background-color: #f2f2f2;
      width: 333px;
      padding: 5px 10px;
      border-radius: 4px;
    }

    .input:focus {
      border: none;
    }

    .close {
      position: absolute;
      right: 15px;
      top: 13px;
    }
  }
}
</style>
